import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class FederatedLearningPage extends StatefulWidget {
  const FederatedLearningPage({Key? key}) : super(key: key);

  @override
  State<FederatedLearningPage> createState() => _FederatedLearningPageState();
}

class _FederatedLearningPageState extends State<FederatedLearningPage> {
  Set<int> selectedDatabaseIndexes = {}; // 使用Set来存储多选的索引
  int selectedModelIndex = 2;

  final List<Map<String, dynamic>> databases = [
    {
      'name': '医院1',
      'icon': 'assets/icons/clinic_home0.png',
      'type': 'hospital',
    },
    {
      'name': '医院2',
      'icon': 'assets/icons/clinic_home0.png',
      'type': 'hospital',
    },
    {
      'name': '医院3',
      'icon': 'assets/icons/clinic_home0.png',
      'type': 'hospital',
    },
    {
      'name': '医疗企业1',
      'icon': 'assets/icons/company.png',
      'type': 'company',
    },
    {
      'name': '医疗企业2',
      'icon': 'assets/icons/company.png',
      'type': 'company',
    },
    {
      'name': '医疗企业3',
      'icon': 'assets/icons/company.png',
      'type': 'company',
    },
  ];

  final List<Map<String, dynamic>> models = [
    {
      'name': 'Cox模型',
      'icon': 'assets/icons/network.png',
    },
    {
      'name': 'MLP模型',
      'icon': 'assets/icons/network.png',
    },
    {
      'name': 'CNN模型',
      'icon': 'assets/icons/network.png',
    },
  ];

  @override
  void initState() {
    super.initState();
    // 设置状态栏颜色
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Color(0xFF1DC4A0),
      statusBarIconBrightness: Brightness.light,
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 顶部区域
          Container(
            width: double.infinity,
            padding: EdgeInsets.only(
              top: MediaQuery.of(context).padding.top,
              left: 20,
              right: 20,
              bottom: 15,
            ),
            decoration: const BoxDecoration(
              color: Color(0xFF1DC4A0),
              // borderRadius: BorderRadius.only(
              //   bottomRight: Radius.circular(20),
              // ),
            ),
            child: Row(
              children: [
                IconButton(
                  icon: const Icon(Icons.arrow_back_ios, color: Colors.white),
                  onPressed: () => Navigator.pop(context),
                  padding: EdgeInsets.zero,
                ),
                const Text(
                  '乳腺癌诊断相关数据库',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),

          // 主体内容部分
          Expanded(
            child: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      '数据库选择',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 15),

                    // 数据库选择部分
                    SizedBox(
                      height: 150,
                      child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: databases.length,
                        itemBuilder: (context, index) {
                          return _buildDatabaseItem(index);
                        },
                      ),
                    ),

                    const SizedBox(height: 30),
                    const Text(
                      '模型选择',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 15),

                    // 模型选择部分
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: List.generate(
                        models.length,
                        (index) => _buildModelItem(index),
                      ),
                    ),

                    const SizedBox(height: 50),

                    // 开始训练按钮
                    SizedBox(
                      width: double.infinity,
                      height: 50,
                      child: ElevatedButton(
                        onPressed: () {
                          Navigator.pushNamed(context, '/training_result');
                        },
                        style: ElevatedButton.styleFrom(
                          backgroundColor: const Color(0xFF1DC4A0),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                        child: const Text(
                          '开始训练',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildDatabaseItem(int index) {
    final database = databases[index];
    final bool isSelected = selectedDatabaseIndexes.contains(index);

    return GestureDetector(
      onTap: () {
        setState(() {
          if (isSelected) {
            selectedDatabaseIndexes.remove(index);
          } else {
            selectedDatabaseIndexes.add(index);
          }
        });
      },
      child: Container(
        width: 110,
        margin: const EdgeInsets.only(right: 15),
        child: Column(
          children: [
            // 图标
            Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
                border: Border.all(
                  color: const Color(0xFF1DC4A0),
                  width: 1,
                ),
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Image.asset(
                  database['icon'],
                  width: 40,
                  height: 40,
                ),
              ),
            ),
            const SizedBox(height: 8),

            // 名称
            Text(
              database['name'],
              style: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w500,
              ),
              textAlign: TextAlign.center,
            ),

            // 选择按钮
            Container(
              margin: const EdgeInsets.only(top: 5),
              width: 24,
              height: 24,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(
                  color: const Color(0xFF1DC4A0),
                  width: 1.5,
                ),
                color: isSelected ? const Color(0xFF1DC4A0) : Colors.white,
              ),
              child: isSelected
                  ? const Icon(
                      Icons.check,
                      color: Colors.white,
                      size: 16,
                    )
                  : null,
            ),

            // 了解详情按钮
            // TextButton(
            //   onPressed: () {
            //     // 展示详情
            //     ScaffoldMessenger.of(context).showSnackBar(
            //       SnackBar(content: Text('查看${database['name']}详情')),
            //     );
            //   },
            //   child: const Text(
            //     '了解详情',
            //     style: TextStyle(
            //       color: Color(0xFF1DC4A0),
            //       fontSize: 12,
            //     ),
            //   ),
            // ),
          ],
        ),
      ),
    );
  }

  Widget _buildModelItem(int index) {
    final model = models[index];
    final bool isSelected = selectedModelIndex == index;

    return GestureDetector(
      onTap: () {
        setState(() {
          selectedModelIndex = index;
        });
      },
      child: Column(
        children: [
          // 模型图标
          Container(
            width: 80,
            height: 80,
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(15),
              border: Border.all(
                color: const Color(0xFFE0E0E0),
                width: 1,
              ),
            ),
            child: Image.asset(
              model['icon'],
              fit: BoxFit.contain,
            ),
          ),
          const SizedBox(height: 8),

          // 模型名称
          Text(
            model['name'],
            style: const TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w500,
            ),
          ),
          const SizedBox(height: 8),

          // 选择按钮
          Container(
            width: 24,
            height: 24,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(
                color: const Color(0xFF1DC4A0),
                width: 1.5,
              ),
              color: isSelected ? const Color(0xFF1DC4A0) : Colors.white,
            ),
            child: isSelected
                ? const Icon(
                    Icons.check,
                    color: Colors.white,
                    size: 16,
                  )
                : null,
          ),
        ],
      ),
    );
  }
}
